import { _decorator, Component, Node, Graphics, UITransform, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('TestGraphics')
export class TestGraphics extends Component {

    private _graphics

    @property([Node])
    nodeArr: Node[] = [];

    start() {
        this.testGraphics();
    }

    testGraphics(){
        const graphics = this._graphics = this.getComponent(Graphics);

        graphics.clear();

        const tempPos = new Vec3(), zeroPos = new Vec3(0, 0, 0);
        const curNodeUITrans = this.node.getComponent(UITransform);
        for (const n of this.nodeArr) {
            const uiTrans = n.getComponent(UITransform);
            const size = uiTrans.contentSize;
            const width = size.width;
            const height = size.height;
            const ap = uiTrans.anchorPoint;
            const x = -width * ap.x;
            const y = -height * ap.y;

            const worldPos = uiTrans.convertToWorldSpaceAR(zeroPos);

            curNodeUITrans.convertToNodeSpaceAR(worldPos, tempPos);

            graphics.rect(tempPos.x + x, tempPos.y + y, width, height);
        }

        graphics.fill();
    }

    update(deltaTime: number) {

    }
}


